import React, { useEffect, useState } from 'react'

import { Table, Image, Space, Switch } from 'antd'
import { updateFlag ,showdata} from '../../api/pro'



function HomeRecommend() {


  const [prolist, setProlist] = useState([])
  // const [searching, setSearching] = useState([])//记录筛选查找内容的

  // 合理的方案
  const [current, setCurrent] = useState(1)
  const [pagesize, setPagesize] = useState(10)

  const showdataHandler=()=>{
    showdata({ type:'isrecommend',flag:1 }).then(res => {
      setProlist(res.data.data)
    })
  }
  useEffect(() => {
    showdataHandler()
  },[])




  const columns = [
    {
      title: '序号',
      fixed: 'left',
      width: 80,
      render: (text, record, index) => {
        return (<span>{index + 1}</span>)
      }
    },
    {
      title: '商品名称',
      fixed: 'left',
      width: 300,
      dataIndex: 'proname',
      key: 'proname'
    },
    {
      title: '商品分类 - 品牌',
      width: 150,
      render: (text, record) => <span>{record.category}/{record.brand}</span>
    },
    {
      title: '商品图片',
      width: 150,
      dataIndex: 'img1',
      key: 'img1',
      render: (text, record) => <Image src={text} width={60} height={60} />
    },
    {
      title: '商品原价',
      width: 150,
      dataIndex: 'originprice',
      key: 'originprice',
      render:(text)=>{return '￥'+text}
    },
    {
      title: '商品折扣',
      width: 150,
      dataIndex: 'discount',
      key: 'discount'
    },
    {
      title: '商品销量',
      width: 150,
      dataIndex: 'sales',
      key: 'sales'
    },
    {
      title: '商品库存',
      width: 150,
      dataIndex: 'stock',
      key: 'stock'
    },
    {
      title: '上架状态',
      width: 100,
      fixed: 'right',
      dataIndex: 'issale',
      key: 'issale',
      render: (text) => {
        return <Switch checked={text * 1 === 1} disabled />
      }
    },
    {
      title: '是否推荐',
      width: 100,
      fixed: 'right',
      dataIndex: 'isrecommend',
      key: 'isrecommend',
      render: (text,record,index) => {
        return <Switch checked={text * 1 === 1}  
        
        onChange={(checked, text) => {
          const proid = record.proid
          const arr = [...prolist]
          arr[(current-1)*pagesize + index].isrecommend = checked
          setProlist(arr) 

          updateFlag({ 
            proid:proid,
            type:'isrecommend',
            flag:checked
          })

        }}
        />
      }
    },
    {
      title: '是否秒杀',
      width: 100,
      fixed: 'right',
      dataIndex: 'isseckill',
      key: 'isseckill',
      render: (text, record, index) => {
        return <Switch checked={text * 1 === 1}
          onChange={(checked, text) => {
            const proid = record.proid
            const arr = [...prolist]
            arr[(current-1)*pagesize + index].isseckill = checked
            setProlist(arr) 

            updateFlag({ 
              proid:proid,
              type:'isseckill',
              flag:checked
            })

          }}
        />
      }
    },
    {
      title: '操作',
      width: 150,
      fixed: 'right',
      render: (text, record) => {
        return (
          <Space>
            <span>编辑</span>
            <span> | </span>
            <span>删除</span>
          </Space>
        )
      }
    }
  ]
  return (
    <>
     
      <Table
        pagination={{
          position: ['bottomCenter'],
        }
        }
        dataSource={prolist}
        columns={columns}
        rowKey={record => record.proid}
        scroll={{ x: 1300 }}
        current={current}
        onChange={(page) => {
          setCurrent(page.current)
          setPagesize(page.pageSize)
        }}
      ></Table>
    </>

  )





}

export default HomeRecommend